<template>
    <div class='BottomContact _mobile-main-content'>
        <div class="top">
            <div class="title">
                <div class="text">联系方式</div>
                <div class="line"></div>
            </div>
            <div class="call">
                <div class="item" v-for="item in contactList" :key="item.id">
                    <div class="item-title">{{ item.name }}</div>
                    <div class="ctx" v-if="item.address">
                        <div class="label">地址：</div>
                        <div class="value">{{ item.address }}</div>
                    </div>
                    <div class="ctx" v-if="item.zipCode">
                        <div class="label">邮编：</div>
                        <div class="value">{{ item.zipCode }}</div>
                    </div>
                    <div class="ctx" v-if="item.mobile">
                        <div class="label">电话：</div>
                        <div class="value">{{ item.mobile }}</div>
                    </div>
                    <div class="ctx" v-if="item.email">
                        <div class="label">邮箱：</div>
                        <div class="value">{{ item.email }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="title">
                <div class="text">在线留言</div>
                <div class="line"></div>
            </div>
            <div class="message">
                <input
                    v-model="formData.mobile"
                    placeholder="请填写联系方式"
                    placeholder-class="input-placeholder"
                />
                <textarea
                    v-model="formData.text"
                    placeholder="请输入留言内容"
                    type="textarea"
                    placeholder-class="input-placeholder"
                />
                <div class="submit" @click="submit">提交</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import mapImg from '@/assets/images/map.png'
const contactList:Ref<Array<{
    id:number,
    name:string,
    address?:string,
    zipCode?:string,
    mobile?:string,
    email?:string
}>> = ref([
    {
        id:1,
        name:'济宁总部',
        address:'北京市朝阳区阜通东大街10号-期10楼1003-1004室',
        zipCode:'100085',
        mobile:'0371 - 63910000',
        email:'hx@hexieauto.com'
    },
    {
        id:2,
        name:'重庆分公司',
        address:'北京市朝阳区阜通东大街10号-期10楼1003-1004室',
        zipCode:'100085',
        email:'hx@hexieauto.com'
    },
    {
        id:3,
        name:'河南分公司',
        address:'北京市朝阳区阜通东大街10号-期10楼1003',
        mobile:'0371 - 63910000',
        email:'hx@hexieauto.com'
    }
])
const $viewerApi = getCurrentInstance()?.appContext.config.globalProperties.$viewerApi

const open = ()=>{
    $viewerApi && $viewerApi({
        images:[mapImg]
    })
}

const formData:Ref<{
    mobile:string,
    text:string
}> = ref({
    mobile:'',
    text:''
})

const submit = ()=>{
    console.log(formData.value)
}
</script>


<style lang="scss" scoped>
.BottomContact{
    background: url('@/assets/images/bottom-contact-bgc2.jpg') no-repeat;
    background-size: cover;
    height: 580px;
    .title{
        display: flex;
        font-weight: bold;
        line-height: 30px;
        .text{
            margin-right: 12px;
            font-size: 16px;
            color: #fff;
            border-bottom: 1px solid #fff;
        }
        .line{
            font-size: 16px;
            flex: 1;
            color: #fff;
            border-bottom: 1px solid #fff;
        }
        padding-bottom: 10px;
    }
    .top{
        .call{
            margin-top: 5px;
            color: #888;
            font-size: 12px;
            .item{
                .item-title{
                    border-left: 2px solid #d3ad6f;
                    padding-left: 7px;
                    line-height: 12px;
                    margin-bottom: 5px;
                }
                .ctx{
                    display: flex;
                    padding-top: 8px;
                    line-height: 10px;
                }
    
                &+ .item{
                    margin-top: 20px;
                }
            }
        }
    }
    .bottom{
        margin-top: 10px;
        .message{
            input,textarea{
                display: block;
                outline: 0;
                width: 100%;
                height: 40px;
                padding: 5px 10px;
                font-size: 12px;
                border: none;
                background: #707070;
                box-sizing: border-box;
                &::placeholder{
                    color: #999;
                }
            }
            input{
                margin-top: 5px;
                height: 25px;
            }
            textarea{
                margin-top: 15px;
                height: 80px;
                resize: none;
            }
            .submit{
                width: 80px;
                height: 25px;
                font-size: 14px;
                border-Radius: 15px;
                border: 1px solid #fff;
                color: #fff;
                text-align: center;
                cursor: pointer;
                line-height: 25px;
                transition: all .3s;
                margin:20px auto 0 auto;
                &:hover{
                    background: #ffffff23;
                }
            }
        }
    }
}
</style>